<template>
    <div class="left-box">
        <el-row :gutter="20">
            <el-col :span="12">
                <div>
                    <my-title title="生活水泵"></my-title>
                    <leftChart1
                        :data="liveHighData"
                        chatTitle="高液位状态"
                        :chartColor="['#12c258', '#ffbf67']"
                    ></leftChart1>
                    <leftChart1
                        :data="liveLowData"
                        chatTitle="低液位状态"
                        :chartColor="['#12c258', '#998f8f']"
                    ></leftChart1>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <my-title title="消防水池"></my-title>
                    <leftChart2
                        :data="FireHighData"
                        chatTitle="高液位状态"
                        :chartColor="['#12c258', '#ffbf67']"
                    ></leftChart2>
                    <leftChart2
                        :data="FireLowData"
                        chatTitle="低液位状态"
                        :chartColor="['#12c258', '#998f8f']"
                    ></leftChart2>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import myTitle from "../../components/title.vue";
import { getPropertyState } from "@/api/sendhttp/baKanban";
import leftChart1 from "./components/leftChart1.vue";
import leftChart2 from "./components/leftChart2.vue";
import pieJson from "./pie.json";
export default {
    components: { myTitle, leftChart1, leftChart2 },
    name: "leftBox",
    data() {
        return {
            // 生活水泵
            liveHighData: [],
            liveLowData: [],
            // 消防水池
            FireHighData: [],
            FireLowData: [],
        };
    },
    created() {},
    mounted() {
        this.getLiveData();
        this.getFireData();
    },
    methods: {
        // 生活水泵
        async getLiveData() {
            const {
                data: { code, data, msg },
            } = await getPropertyState({ deviceType: "SHSB_SHSB" });

            // const { code, data, msg } = pieJson;
            if (code === "200") {
                this.liveHighData = this.mapData(data, "高液位");
                this.liveLowData = this.mapData(data, "低液位");
            } else {
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        // 消防水池
        async getFireData() {
            const {
                data: { code, data, msg },
            } = await getPropertyState({ deviceType: "SHSB_XFSC" });
            // const { code, data, msg } = pieJson;
            if (code === "200") {
                this.FireHighData = this.mapData(data, "高液位");
                this.FireLowData = this.mapData(data, "低液位");
            } else {
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        mapData(data, key) {
            return data[key].map((item) => ({
                value: item.total,
                name: item.name,
            }));
        },
    },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.left-box {
    height: 400px;
    .left-box-chart {
        width: 100%;
        height: 100%;
    }
}
</style>
